<template>
  <view class="OrderDetail">
    <!-- 顶部导航栏 -->
    <view class="nav">
      <view class="title">支付成功，请您前往指定门店进行消费</view>
      <view class="nav-content">
        <uni-icons type="home" size="30" color="#fff"></uni-icons>
        <view class="content">
          <view class="name">尾页汽车制造长</view>
          <view class="address">尾页汽车制造长</view>
        </view>
        <uni-icons type="paperplane-filled" size="30" color="#fff"></uni-icons>
      </view>
    </view>
    <!-- 中间订单详情部分 -->
    <view class="order-detail">
      <view class="title">订单详情</view>
      <!-- 服务内容 -->
      <view class="service-content">
        <!-- 服务项目 -->
        <view
          class="service-item"
          v-for="item in serviceItemsList"
          :key="item.id">
          <view class="item-title">{{ item.name }}</view>
          <view class="item-price">${{ item.originalPrice }}</view>
        </view>
      </view>
      <!-- 价格信息 -->
      <view class="price-info">
        <view class="total-price">
          <view class="original-price">
            <text>原价</text>
            <text>￥{{ originalPrice }}</text>
          </view>
          <view class="discount-price">
            <text>优惠</text>
            <text>{{ discountPrice - originalPrice }}</text>
          </view>
        </view>
        <view class="coupon">
          <text>优惠券</text>
          <text>￥{{ couponPrice }}</text>
        </view>
      </view>
      <!-- 支付金额 -->
      <view class="pay-amount">
        <text>支付金额</text>
        <text>￥{{ payPrice }}</text>
      </view>
      <!-- 订单信息 -->
      <view>订单信息</view>
      <view class="order-info">
        <view class="info-item">
          <text>订单号：</text>
          <text>{{ orderInfo.orderNo }}</text>
        </view>
        <view class="info-item">
          <text>下单时间：</text>
          <text>{{ orderInfo.orderTime }}</text>
        </view>
        <view class="info-item">
          <text>车辆：</text>
          <text>奔驰</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useCheckedServiceStore } from "@/stores/CheckedService";
import { useOrderInfoStore } from "@/stores/order";

//创建Pinia实例 获取选中的服务信息
const checkedServiceItems = useCheckedServiceStore();
//定义接收服务的对象
const serviceItemsList = ref<any[]>(
  checkedServiceItems.getCheckedServiceItemsList()
);
//创建订单信息的pinia实例
const orderInfoStore = useOrderInfoStore();
//定义订单数据
const orderInfo = ref<OrderDetailResponse | any>(orderInfoStore.getOrderInfo());
//定义优惠后的价格
const discountPrice = ref<number>(checkedServiceItems.getTotalPrice());
//定义 原价
const originalPrice = ref<number>(0);
//从本地 获取优惠券的优惠价格
const couponPrice = ref<number>(uni.getStorageSync("couponPrice") || 0);
//支付金额
const payPrice = ref<number>(
  originalPrice.value - couponPrice.value - discountPrice.value
);
//遍历选中的服务列表 得到原价
serviceItemsList.value.forEach((item) => {
  originalPrice.value += item.originalPrice;
});

console.log("优惠后价格:", discountPrice.value);
console.log("选中的服务信息:", serviceItemsList.value);
console.log("原价：", originalPrice.value);
</script>

<style lang="scss" scoped>
.OrderDetail {
  box-sizing: border-box;
  .nav {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    background-color: #0084ff;
    box-sizing: border-box;
    padding: 24rpx;
    .title {
      color: aliceblue;
      font-size: 33rpx;
    }
    .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20rpx;
      color: #fff;

      .content {
        flex: 1;
        margin-left: 20rpx;
        .name {
          font-size: 32rpx;
        }
        .address {
          margin-top: 10rpx;
          font-size: 29rpx;
        }
      }
    }
  }
  /**主体 订单详情部分 */
  .order-detail {
    box-sizing: border-box;
    padding: 20rpx;

    .title {
      font-size: 33rpx;
    }

    .service-content {
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
      border-radius: 10rpx;
      margin: 15rpx 0;
      box-sizing: border-box;
      padding: 15rpx;
      .service-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;
      }
    }

    .price-info {
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
      border-radius: 10rpx;
      margin: 15rpx 0;
      box-sizing: border-box;
      padding: 15rpx;
      .total-price {
        border-bottom: 1rpx solid #000;
        display: flex;
        flex-direction: column;
        gap: 15rpx;
        .original-price {
          display: flex;
          justify-content: space-between;
        }
        .discount-price {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10rpx;
        }
      }
      .coupon {
        display: flex;
        justify-content: space-between;
        margin: 20rpx 0;
      }
    }

    .pay-amount {
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
      border-radius: 10rpx;
      margin: 15rpx 0 30rpx;
      box-sizing: border-box;
      padding: 15rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
    }

    .order-info {
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
      border-radius: 10rpx;
      margin: 15rpx 0;
      box-sizing: border-box;
      padding: 15rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;

      .info-item {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
